<template>

	<view class="page" :style="{'padding-top':mt+'px'}">
		<c-nav-bar :title="headerTitle"></c-nav-bar>



		<!-- 头部 -->
		<view class="topimg">
			<!-- 	<image src="https://i.ringzle.com/file/20231107/baad74c572df48308e918d2de1704ba6.png" mode='scaleToFill'>
			</image> -->
			<!-- <u-swiper height='320' :list="list1" indicator indicatorMode="line" circular @change="swiper"></u-swiper> -->
			<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
				style="height: 320rpx;">
				<swiper-item class="swiper-items" v-for="item,index in list1 " @click="img(item,index)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="category">
			<view class="category-main">
				<view class="category-main-container" v-for="item in serviceList" :key='item.name'
					@click="gotomk(item)">
					<view class="image">
						<image class="img" :src="item.icon" mode="aspectFill"></image>
					</view>
					<span>{{item.name}}</span>
				</view>
			</view>
		</view>

		<view class="toggleCard">
			<view class="toggle">
				<u-tabs :list="togList" lineWidth="80" lineHeight="7" @click="changeTab" lineColor="#007A69"
					:activeStyle="{
				            color: '#1C1E41',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#333333',
				            transform: 'scale(1)'
				        }">
				</u-tabs>
			</view>

			<!-- 社区互动 -->
			<view class="card" v-if="names == '社区互动'" v-for="item,index in userList.list" :key="index"
				@click.stop="navDtails(item,'社区互动')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
					<view>
						<!-- {{item.key}} -->
					</view>

				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<!-- 	<view class="center-text">
						<view v-for="it,ind in substrings ">
							{{it |removeHtmlStyle}}
						</view>
					</view> -->
					<view class="center-text">
						{{item.content | removeHtmlStyle}}
					</view>

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 议事广场 -->
			<view class="card" v-if="names == '议事广场'" v-for="item,index in userList.list" :key="index"
				@click.stop="navDtails(item,'议事广场')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
					<!-- 	<view class="top-time">
						{{item.key}}
					</view> -->
					<view>
					</view>

				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<view class="center-text">
						{{item.content | removeHtmlStyle}}
					</view>
					<!-- <view class="center-text">
						<view v-for="it,ind in substrings ">
							{{it |removeHtmlStyle}}
						</view>
					</view> -->

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 文化休闲 -->
			<view class="card" v-if="names == '文化休闲'" v-for="item,index in userList.list" :key="index"
				@click.stop="navDtails(item,'文化休闲')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
					<!-- <view class="top-time">
						{{item.key}}
					</view> -->
					<view>
					</view>

				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<view class="center-text">
						{{item.content | removeHtmlStyle}}
					</view>
					<!-- <view class="center-text">
						<view v-for="it,ind in substrings ">
							{{it |removeHtmlStyle}}
						</view>
					</view> -->

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 兴趣课程 -->
			<view class="card1" v-if="names == '兴趣课程'" v-for="item,index in userList.list" :key="index"
				@click.stop="navDtails(item,'兴趣课程')">
				<view class="left">
					<image class="image" :src="item.pic" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<!-- <u-icon name="map"></u-icon> -->
						<image class="image"
							src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png" mode="">
						</image>
						<view>{{item.address}}</view>
					</view>
					<view class="three-certificate">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/c81ba13778a54369b826427a53729e8e.png" mode="">
						</image>
					</view>
					<view class="four-key">
						<view class="key-key">
							<view class="key" v-for="(ite,inde) in item.listType" :key="index">
								{{ite}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 求职信息 -->
			<view class="card2" v-if="names == '求职信息'" v-for="item,index in userList.list" :key="index"
				@click.stop="navInformation(item,0)">
				<view class="one-title">
					<view class="left">
						{{item.positionName}}
					</view>
					<view class="right">
						{{item.money}}元
					</view>
				</view>
				<view class="two-address">
					<image class="image" src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png"
						mode="">
					</image>
					<view>{{item.address}}</view>
				</view>
				<view class="four-key">
					<view class="key" v-for="(ite,inde) in item.typeList" :key="index">
						{{ite}}
					</view>
				</view>
				<view class="five-user">
					<view class="five-user-left">
						<view class="left">
							<image :src="item.headUrl" mode=""></image>
						</view>
						<view class="center">
							<view class="one">
								{{item.realName}}
							</view>
							<view class="two">
								{{item.createDate}}
							</view>
						</view>
					</view>
					<view class="right" @click="navInformation(item,0)">
						查看简历
					</view>
				</view>


			</view>
			<!-- 招聘信息 -->
			<view class="card2" v-if="names == '招聘信息'" v-for="item,index in userList.list" :key="index"
				@click.stop="navInformation(item,1)">
				<view class="one-title">
					<view class="left">
						{{item.positionName}}
					</view>
					<view class="right">
						{{item.money}}元
					</view>
				</view>
				<view class="two-address">
					<image class="image" src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png"
						mode="">
					</image>
					<view>{{item.address}}</view>
				</view>
				<view class="four-key">
					<view class="key" v-for="(ite,inde) in item.typeList" :key="index">
						{{ite}}
					</view>

				</view>
				<view class="five-user">
					<view class="five-user-left">
						<view class="left">
							<image :src="item.headUrl" mode=""></image>
						</view>
						<view class="center">
							<view class="one">
								{{item.realName}}
							</view>
							<view class="two">
								{{item.createDate}}
							</view>
						</view>
					</view>
					<view class="right" @click="navInformation(item,1)">
						去申请
					</view>
				</view>
			</view>
			<!-- 家政服务 -->
			<view class="card1" v-if="names == '家政服务'" v-for="item,index in userList.list" :key="index"
				@click.stop="navDtails(item,'家政服务')">
				<view class="left">
					<image class="image" :src="item.pic" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<!-- <u-icon name="map"></u-icon> -->
						<image class="image"
							src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png" mode="">
						</image>
						<view>{{item.workAddress}}</view>
					</view>
					<view class="three-certificate">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/c81ba13778a54369b826427a53729e8e.png" mode="">
						</image>
					</view>
					<view class="four-key">
						<view class="key-key">
							<view class="key" v-for="(ite,inde) in listType" :key="index">
								{{ite.dictLabel}}
							</view>
						</view>
						<view class="price">
							￥{{item.money}} <text style="font-size: 24rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 志愿服务 -->
			<view class="card3" v-if="names == '志愿服务'" v-for="item,index in userList.activityOfMonth" :key="index"
				@click.stop="navDtails(item,'志愿服务')">
				<view class="left">
					<image class="image" :src="item.pic" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<view>{{item.createDate}}</view>
					</view>
				</view>

			</view>
			<!-- 趣味活动 -->
			<view class="card3" v-if="names == '趣味活动'" v-for="item,index in userList.list" :key="index"
				@click.stop="navDtails(item,'趣味活动')">
				<view class="left">
					<image class="image" :src="item.pic" mode="">
					</image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<view>{{item.createDate}}</view>
					</view>
					<view class="text2">
						免费
					</view>
				</view>

			</view>



			<!-- 分享弹框 -->
			<u-popup :show="popup" mode="bottom" :round="30" bgColor='#F3F5F9' @close="close" @open="open"
				closeOnClickOverlay>
				<uni-popup ref="popup" type="center" @touchmove.stop.prevent="moveHandle">

					<view class="content">
						<view class="title">
							分享到：
						</view>
						<view class="share">
							<view class="weixin" @tap="weixin()">
								<image style="width: 60rpx; height: 60rpx;"
									src="https://i.ringzle.com/file/20231206/08a5d1cfc46b41e8a03a2be57f34843c.png">
								</image>
								<button type="default" open-type="share" class="clear-style">微信好友</button>

							</view>

							<view class="pengyouquan" @click="pengyouquan()">
								<image style="width: 60rpx; height: 60rpx;"
									src="https://i.ringzle.com/file/20231206/81da4172ef5f463b907930ab8878bc8e.png">
								</image>
								<button type="default" open-type="share" class="clear-style">朋友圈</button>
							</view>
						</view>
					</view>
				</uni-popup>
			</u-popup>
		</view>

		<!-- <Tabbar :tabbarIndex="3"></Tabbar> -->
		<u-toast ref="uToast"></u-toast>

	</view>


</template>
<script>
	import TopTabs from '@/compoments/TopTabs/topTabs.vue';
	import Tabbar from '@/compoments/Tabbar/tabbar.vue'

	export default {
		components: {
			Tabbar,
			TopTabs
		},
		data() {
			return {

				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				headerTitle: '一体服务',

				headerTitle: '一体服务',

				serviceList: [{
					name: '资讯信息',
					icon: 'https://i.ringzle.com/file/20231219/5af03858e6b4457ea57313b6e90d21a0.png',
					path: '/pagesService/news/news'
				}, {
					name: '社区互动',
					icon: 'https://i.ringzle.com/file/20231219/9330e55fb1294a408ca6ae6dbe4d07ff.png',
					path: '/pagesService/CouncilSquare/CouncilSquare'
				}, {
					name: '议事广场',
					icon: 'https://i.ringzle.com/file/20231219/ecbd037dc8ea43ea964c064f6d9ba83c.png',
					path: '/pagesService/CouncilSquare/CouncilSquare'
				}, {
					name: '家政服务',
					icon: 'https://i.ringzle.com/file/20231219/4ffcfe1c82a44772ba5474a41a37267a.png',
					path: '/pagesService/CouncilSquare/CouncilSquare'
				}, {
					name: '小工市场',
					icon: 'https://i.ringzle.com/file/20231219/f3a8a1669a9e45f29b541ef50ca67c24.png',
					path: '/pagesService/market/market'
				}, {
					name: '志愿服务',
					icon: 'https://i.ringzle.com/file/20231219/3f75c7f02720475d9fad5b366dbbfb41.png',
					path: '/pagesService/funActivity/service'
				}, {
					name: '文化休闲',
					icon: 'https://i.ringzle.com/file/20231219/bdaa09eb1262494f87ea9f7f3a9720d0.png',
					path: '/pagesService/CouncilSquare/CouncilSquare'
				}, {
					name: '兴趣课程',
					icon: 'https://i.ringzle.com/file/20231219/0fedba00bff54a5487bbd9c9186985c8.png',
					path: '/pagesService/CouncilSquare/CouncilSquare'
				}, {
					name: '活动日历',
					icon: 'https://i.ringzle.com/file/20231219/324dcbd2412f4302a4366eb7b074ef05.png',
					path: '/pagesService/funActivity/funActivity'
				}, {
					name: '更多',
					icon: 'https://i.ringzle.com/file/20231219/09942519532247e9a8f1194617951c9f.png',
					path: '/pages/shengsi/index'
				}, ],
				togList: [{
						name: '社区互动',
					},
					{
						name: '议事广场',
					},
					{
						name: '文化休闲',
					},
					{
						name: '兴趣课程',
					},
					{
						name: '家政服务',
					},
					{
						name: '趣味活动',
					},
					{
						name: '志愿服务',
					},
					{
						name: '招聘信息',
					},
					{
						name: '求职信息',
					},
				],
				userList: {},
				show: false,
				value: '',
				status: 0,
				fromData: {
					limit: 4,
					page: 1,
					type: null
				},
				share: null,
				popup: false,
				names: '社区互动',
				list1: [],
				substrings: [],
				indexList: {},
				listType: []
			}
		},
		onLoad() {
			if (this.names == '社区互动') {
				this.names = '社区互动'
				this.fromData.type = 9
				this.$api.get('/api/forum/page', this.fromData).then(res => {
					this.userList = res.data.data
				})
			}
			this.getSwiper()
			this.getHousekeeping()
		},
		filters: {
			// 去除富文本标签样式
			removeHtmlStyle(html) {
				const relStyle = /style\s*?=\s*?(['"])[\s\S]*?\1/g
				const relTag = /<.+?>/g
				const relClass = /class\s*?=\s*?(['"])[\s\S]*?\1/g
				// content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, '')

				let newHtml = ''
				if (html) {
					newHtml = html.replace(relStyle, '')
					newHtml = newHtml.replace(relTag, '')
					newHtml = newHtml.replace(relClass, '')
				}
				return newHtml
			}
		},
		methods: {
			// 轮播图点击事件
			img(item, index) {},
			// 获取轮播图数据
			getSwiper() {
				this.$api.get(`/sys/isappletpic/queryBannerByType/${9}`).then(res => {
					this.list1 = res.data.data.bannerList
				})
			},
			// 获取家政服务字典housekeeping type
			getHousekeeping() {
				this.$api.get('/sys/dict/type/all').then(res => {
					this.listType = res.data.data.find((p) => p.dictType == 'housekeeping_type').dataList;

				})
			},
			// 切换社区获取数据
			changeTab(index) {
				this.indexList = index
				if (index.name == "社区互动") {
					this.fromData.type = 9
					this.title = '社区互动'
					this.names = '社区互动'
					this.substrings1 = []
					this.$api.get('/api/forum/page', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "议事广场") {
					this.fromData.type = 1
					this.title = '议事广场'
					this.names = '议事广场'
					this.substrings1 = []
					this.$api.get('/api/forum/page', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "文化休闲") {
					this.title = '文化休闲'
					this.names = '文化休闲'
					this.fromData.type = null
					this.substrings = []
					this.$api.get('/api/culturalLeisure/page', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "兴趣课程") {
					this.title = '兴趣课程'
					this.names = '兴趣课程'
					this.fromData.type = null
					this.$api.get('/api/course/page', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "趣味活动") {
					this.title = '趣味活动'
					this.names = '趣味活动'
					this.fromData.type = null
					this.$api.get('/api/activity/getPage', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "志愿服务") {
					this.title = '志愿服务'
					this.names = '志愿服务'
					this.fromData.type = null
					this.$api.get('/api/commvolunteer/getList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "家政服务") {
					this.title = '家政服务'
					this.names = '家政服务'
					this.fromData.type = null
					this.$api.get('/api/house/page', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "招聘信息") {
					this.title = '招聘信息'
					this.names = '招聘信息'
					this.fromData.type = null
					this.$api.get('/api/commrecruit/page', this.fromData).then(res => {
						this.userList = res.data.data

					})
				}
				if (index.name == "求职信息") {
					this.title = '求职信息'
					this.names = '求职信息'
					this.fromData.type = null
					this.$api.get('/api/commjobhunt/page', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
			},

			// 去详情页面
			navDtails(item, name) {
				let obj = {
					id: item.id,
					title: name
				}
				if (name == '议事广场') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
					})
				}

				if (name == '文化休闲') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/cultureDetails?obj=' + JSON.stringify(obj)
					})
				}

				if (name == '社区互动') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails2?obj=' + JSON.stringify(obj)
					})
				}
				if (name == '家政服务') {
					uni.navigateTo({
						url: '/pagesService/CouncilSquare/domesticDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (name == '兴趣课程') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/interestDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (name == '趣味活动') {
					uni.navigateTo({
						url: '/pagesService/funActivity/detailActivity?id=' + item.id
					})
				}
				if (name == '志愿服务') {
					uni.navigateTo({
						url: '/pagesService/funActivity/detailsService?id=' + item.id
					})
				}

			},

			// 招聘 求职 详情
			navInformation(item, type) {
				let obj = {
					id: item.id,
					type: type, //0 求职 电话联系   1 招聘 申请职位
					bossName: item.linkName,
					bossPhone: item.phone
				}
				if (type == 0) {
					uni.navigateTo({
						url: '/pagesService/CouncilSquare/JobDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (type == 1) {
					uni.navigateTo({
						url: '/pagesService/CouncilSquare/recruitDetails?obj=' + JSON.stringify(obj)
					})
				}


			},


			gotomk(e) {
				if (e.name == '海岛航旅') {
					return wx.navigateToMiniProgram({
						shortLink: '#小程序://海岛航旅/3OtLtc8wmESOAou',
						//develop开发版；trial体验版；release正式版
						envVersion: 'release',
						success(res) {
							// 打开成功
						}
					})

				}

				if (!e.path) {
					return this.$refs.uToast.show({
						type: 'success',
						title: '',
						message: "正在开发",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					})
				}
				uni.navigateTo({
					url: e.path + "?name=" + e.name
				})
			},

			// 分享
			Share() {

			},
			// 评论 // 去详情页面
			review(item) {
				let obj = {
					id: item.id,
					key: 0
				}
				uni.navigateTo({
					url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
				})
			},

			// 点赞
			giveALike(item) {
				let list = {
					id: item.id,
					type: item.type
				}

				this.$api.get('/api/behavior/like', list)
					.then(res => {
						// this.getList(this.id)
						this.$showToast(res.data.data)
						if (res.data.data == '点赞成功') {
							this.likenumShow = false
							this.changeTab(this.indexList)
							this.$showToast('点赞成功')
						} else if (res.data.data == '取消成功') {
							this.$showToast('取消成功')
							this.likenumShow = true
							this.changeTab(this.indexList)
						}
					})
			},
			// 打开弹出框
			open() {},
			// 关闭弹框事件
			close() {
				this.show = false //评论弹框
				this.popup = false //分享弹框
			},
			// input事件
			change() {},


		}


	}
</script>
<style lang="less">
	.u-tabs__wrapper__nav__line {
		left: 36rpx !important;
	}

	.u-input__content__field-wrapper {
		margin-left: 75rpx !important;
	}
</style>

<style lang="scss" scoped>
	.content {
		height: 30vh;
		width: 100%;
		// display: flex;
		padding: 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.share {
			display: flex;
			align-items: center;
			text-align: center;
			padding: 20rpx;

			.weixin {
				margin-right: 20rpx;

			}

			.clear-style {
				// margin-right: 20rpx;
				border: none;
				border-radius: 0;
				background-color: transparent !important;
				// padding: 0rpx !important;
				// margin: 0rpx !important;
				text-align: left;
				// height: 140rpx;
				font-size: 24rpx;
				color: #71747C;
			}

			.clear-style::after {
				border: none;
			}



		}
	}
</style>






<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.page {
		background: #FFFFFF;
		// padding-top: 120rpx;
	}

	.hander {
		background: #fff !important;
		padding: 0 !important;
	}

	.topimg image {
		width: 750rpx;
		height: 320rpx;
	}

	.topimg {
		width: 750rpx;
		height: 320rpx;
		margin-bottom: 40rpx;
	}

	.category-main {
		// margin-top: 10rpx;
		margin: 16rpx 24rpx;
		width: 702rpx;
		// height: 292rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;

		.category-main-container {
			width: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.category-main-container .image {
			height: 88rpx;
			width: 88rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.category-main-container span {
			margin: 20rpx 0 36rpx;
		}
	}


	.publish {
		padding: 0 19rpx;

		.publish-text {
			margin-top: 24rpx;
			width: 702rpx;
			display: flex;
			justify-content: space-between;
			// padding: 0 19rpx;
			border-radius: 50rpx;
			height: 88rpx;
			border: 1px solid #00BEFF;
			align-items: center;

			.publish-left {
				display: flex;

				image {
					margin: 0 27rpx;
					width: 43rpx;
					height: 48rpx;
				}

				.vertical {
					height: 48rpx;
					// width: 1rpx;
					border: 1rpx solid #EFEFEF;
					margin-right: 27rpx;
				}


			}

			.publish-center {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.center-left {
					color: #777777;
					font-size: 24rpx
				}

				.center-right {
					color: #AAAAAA;
					font-size: 24rpx
				}

			}

			.publish-right {
				width: 110rpx;
				height: 36rpx;
				border-radius: 50rpx;
				margin: auto 30rpx;
				padding: 0 18rpx;
				background: #ebfaff;
				text-align: center;

				text {
					font-size: 22rpx;
					color: #00BEFF;

				}
			}


		}
	}



	.pop-content {
		height: 85vh;
		// border-radius: 24rpx 24rpx 0 0 ;
		// background: aqua;

		.pop-top {
			display: flex;
			justify-content: space-between;
			margin: 31rpx 24rpx;
			align-items: center;
			// border-bottom: 1rpx solid #EFEFEF;

			.pop-del {
				image {
					width: 36rpx !important;
					height: 36rpx !important;
				}
			}

			.pop-title {
				font-size: 32rpx;
				color: #333333;
			}

			.pop-sort {
				display: flex;
				background: F6F6F6;
				width: 138rpx;
				height: 46rpx;
				border-radius: 50rpx;

				.sort-left {
					width: 64rpx;
					height: 38rpx;
				}

				.sort-right {
					width: 64rpx;
					height: 38rpx;
				}

			}
		}

		.pop-border {
			width: 750rpx;
			height: 1rpx;
			background: #EFEFEF;

		}

		.pop-center {
			.bg-purple {
				align-items: center;
				text-align: center;

				image {
					margin-top: -10rpx;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50rpx;
				}
			}

			.u-col-center {
				border-bottom: 1rpx solid #EFEFEF;

				.center-title {
					margin-top: 26rpx;
					color: #777777;
					font-size: 24rpx;

				}

				.center-text {
					width: 580rpx;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}

			}

			.bg-purple-dark {
				margin-top: 20rpx;
				text-align: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.pop-input-btn {
				background: #FFFFFF;
				width: 100%;
			}

			.pop-input {
				box-sizing: border-box;
				margin: 30rpx;
				padding: 30rpx 0;
				background: #f5f8fa;
				width: 92%;
				height: 88rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				position: fixed;
				bottom: 0;

				.u-input--circle {

					.uni-input-input {
						padding: 50rpx;
						margin-left: 50rpx;
					}
				}

				image {
					position: absolute;
					width: 36rpx;
					height: 36rpx;
					left: 30rpx;
				}
			}
		}
	}


	.active {
		color: #007A69 !important;
		border-bottom: 4rpx solid #007A69;
		font-size: 34rpx !important;
	}
</style>
<style lang="scss" scoped>
	.toggleCard {
		background-color: #fff;
		padding: 0 24rpx 24rpx;


		.toggle {
			height: 108rpx;
			background-image: url('https://i.ringzle.com/file/20231219/e8eac48eac6649199796fb20fd9f109c.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.toggle-list {
				// background-color: aqua;
				margin: 0 12rpx;
				display: inline-block;
				/* 让内容水平排列，不换行 */
				/* 添加内容的样式，如内边距、外边距、宽度等 */

				.text {
					width: 136rpx;
					height: 48rpx;
					color: #363636;
					font-size: 34rpx
				}
			}

		}

		.card {
			box-sizing: border-box;
			padding: 0 24rpx 24rpx;
			margin: 24rpx auto 24rpx;
			// margin: 0 24rpx 24rpx;
			background: #FFFFFF;
			width: 676rpx;
			border-radius: 16rpx;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);


			.card-top {
				padding: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top-left {
					display: flex;

					image {
						border-radius: 50rpx;
						width: 60rpx;
						height: 60rpx;
						margin: 0 16rpx 0 -22rpx;
					}

					.top-name {
						text-align: left;

						h3 {
							font-size: 28rpx;
							color: #333333;
						}

						span {
							font-size: 22rpx;
							color: #AAAAAA;
						}
					}

				}

				.top-time {
					// background: agba(0, 0, 0, 0.8) #1E6BFF;
					color: #00BEFF;
					font-size: 24rpx;
					background: #ebfaff;
					padding: 4rpx 16rpx;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
				}
			}

			.card-center {
				width: 625rpx;
				overflow: hidden;

				.center-title {
					color: #333333;
					font-size: 26rpx;
					overflow-wrap: break-word;
					// color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					text-align: left;
					white-space: nowrap;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					// line-height: 37px;
					// margin: 19px 163px 0 24px;
				}

				.center-text {
					margin-top: 6rpx;
					color: #666666;
					font-size: 28rpx;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;


				}
			}

			.card-img {
				display: flex;
				justify-content: space-between;

				.image {

					.img {
						width: 214rpx;
						height: 214rpx;
						background: #00BEFF;

						.img:nth-child(1) {
							border-radius: 16rpx 0rpx 0rpx 16rpx;
						}

						.img:nth-child(2) {
							border-radius: 0rpx 0rpx 0rpx 0rpx;
						}

						.img:nth-child(3) {
							border-radius: 0rpx 16rpx 16rpx 0rpx;
						}
					}
				}


			}



			.card-bottom {
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin: 32rpx 0;
				// width: 702rpx;


				.card-img-one {
					// margin: 0 44rpx;
					display: flex;
					margin: 0 auto;



					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-two {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-three {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}


			}



		}

		.card1 {
			box-sizing: border-box;
			display: flex;
			padding: 24rpx 0;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				margin-right: 20rpx;

				.image {
					width: 204rpx;
					height: 204rpx;
					border-radius: 16rpx;
				}

			}

			.right {
				.one-title {
					font-size: 36rpx;
					color: #1C1E41;
					font-weight: bold;
				}

				.two-address {
					display: flex;
					align-items: center;
					font: size 24rpx;
					color: #1C1E41;
					margin: 10rpx 0;

					.image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}

				.three-certificate {
					.image {
						width: 112rpx;
						height: 40rpx;


					}
				}

				.four-key {
					margin: 10rpx 0 10rpx;
					display: flex;
					justify-content: space-between;
					width: 475rpx;

					.key-key {
						display: flex;
					}

					.key {
						line-height: 40rpx;
						display: flex;
						margin-right: 8rpx;
						font-size: 22rpx;
						padding: 6rpx 6rpx;
						color: #874D29;
						border: 1rpx solid #EBC9B8;
					}

					.price {
						font-size: 40rpx;
						color: #FD3939;
					}
				}
			}
		}

		.card2 {
			box-sizing: border-box;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.one-title {
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 32rpx;
					color: #333333;
					font-weight: Bold;
				}

				.right {
					font-size: 32rpx;
					color: #FF4141;
					font-weight: Bold;
				}
			}

			.two-address {
				display: flex;
				align-items: center;
				font: size 24rpx;
				color: #1C1E41;
				margin: 24rpx 0 20rpx;
				font-weight: Regular;

				.image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}

			.four-key {
				margin: 20rpx 0 36rpx;

				display: flex;

				.key {
					display: flex;
					margin-right: 12rpx;
					font-size: 22rpx;
					padding: 6rpx 12rpx;
					color: #874D29;
					border: 1rpx solid #EBC9B8;
				}
			}

			.five-user {
				display: flex;
				justify-content: space-between;

				.five-user-left {
					display: flex;

				}

				.left {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.center {
					margin: 0 20rpx;

					.one {
						font-size: 28rpx;
						color: #333333;
						font-weight: Bold;
					}

					.two {
						font-size: 26rpx;
						color: #808080;
						font-weight: Regular;
					}
				}

				.right {
					border-radius: 50rpx;
					border: 1rpx solid #007A69;
					color: #007A69;
					text-align: center;
					line-height: 64rpx;
					width: 148rpx;
					height: 64rpx;
					font-weight: Regular;
				}

			}

		}

		.card3 {
			box-sizing: border-box;
			display: flex;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				margin-right: 20rpx;

				.image {
					width: 288rpx;
					height: 204rpx;
					border-radius: 16rpx;
				}

			}

			.right {
				padding: 10rpx 0;

				.one-title {
					font-size: 32rpx;
					color: #1C1E41;
					font-weight: Bold;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 指定最大行数 */
					-webkit-box-orient: vertical;
					/* 垂直排列文本 */
					overflow: hidden;
				}

				.two-address {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #1C1E41;
					margin: 16rpx 0;
					font-weight: Regular;

				}

				.text2 {
					font-weight: Regular;
					font-size: 26rpx;
					color: #FF4141;
					margin: 6rpx 0;
				}


			}
		}

	}
</style>